<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>新闻后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo/demo.css">
    <script type="text/javascript" src="../jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <style>
        a{
            text-decoration: none;
            color:#000;
        }
    </style>
</head>
<body>

<div data-options="fit:true" class="easyui-layout" style="width:700px;height:350px;">
    <div data-options="region:'north'" style="height:80px;">
        <img src="./logo.png" alt="" style="height:70%;margin:10px 0 0 100px;border:0">
        <div style="padding:5px 0;float:right;margin:5px 50px 0 0">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'" style="margin-right:15px">Picture</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-clipart',size:'large',iconAlign:'top'" style="margin-right:15px">Clip Art</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'" style="margin-right:15px">Shapes</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'" style="margin-right:15px">SmartArt</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'" style="margin-right:15px">Chart</a>
        </div>
    </div>
    <div data-options="region:'south',split:true" style="height:50px;"></div>
    <div data-options="region:'west',split:true" title="West" style="width:200px;">
        <div data-options="fit:true" class="easyui-accordion" style="width:500px;height:300px;">
            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                <ul class="easyui-tree wu-side-tree">
                    <li>
                        <a href="javascript:void(0)" data-link="users.html" iframe="1">用户管理</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" data-link="cate.html" iframe="1">分类管理</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" data-link="news.html" iframe="1">新闻管理</a>
                    </li>
                </ul>
            </div>
            <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
                <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
            </div>

        </div>
    </div>
    <div data-options="region:'center',title:'主页',iconCls:'icon-ok'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">

            <div title="首页" data-options="href:'home.html',closable:false,iconCls:'icon-tip',cls:'pd3'"></div>

        </div>
    </div>
</div>
<script>
	$(function(){
		$('.wu-side-tree a').on("click",function(){
			var title = $(this).text();
			var url = $(this).attr('data-link');
			var iconCls = $(this).attr('data-icon');
			var iframe = $(this).attr('iframe')==1?true:false;
			addTab(title,url,iconCls,iframe);
		});
	})

    function addTab(title,href,iconCls,iframe) {
        var tabPanel = $('#wu-tabs');
		if(!tabPanel.tabs("exists",title)){
			var content='<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
			if(iframe){
				tabPanel.tabs('add',{
					title: title,
					content: content,
					closable: true,
					fit:true,
					iconCls:iconCls,
					cls:'pd3'
				});
            }else{
				tabPanel.tabs('add',{
					title: title,
					href:href,
					closable: true,
					fit:true,
					iconCls:iconCls,
					cls:'pd3'
				});
			}
		}else{
			tabPanel.tabs('select',title);
        }
	}
</script>
</body>
</html>